<template>
	<view class="wrap">
		<!-- header start-->
		<view class="warp_header_title">私房菜（万达广场店）</view>
		<view class="warp_header_status uni-flex-row-between">
			<view class="wrap_header_vip">
				堂食
			</view>
			<view class="wrap_header_status_info">商家已接单 已买单</view>
		</view>
		<view class="table_number">
			<view class="txt">餐桌号</view>
			<view class="num">04</view>
		</view>
		<!-- header end -->

		<!-- content start-->
		<view class="content">
			<view class="content_header">点餐详情</view>
			<view v-for="(item,index) in list" :key="index" class="list_box uni-flex-row-start">
				<view>
					<image class="item_menu_image" :src="item.icon" mode="aspectFill"></image>
				</view>
				<view class="item_menu_name">
					<text class="item_menu_name_txt">{{item.name}}</text>
					<view class="item_menu_name_desc">
						{{item.desc}}
					</view>
					<view class="uni-flex-row-between">
						<view style="color: #EE2F37; font-weight: bold;font-size: 24rpx;">
							<text style="font-size: 20rpx;">￥</text>
							{{item.price}}
						</view>
						<view class="u-type-info u-font-22">
							x{{item.num}}
						</view>
					</view>
				</view>
			</view>
			<view class="content_footer">
				共计 6 件，合计<text style="color: #EE2F37;font-size: 22rpx;margin-left: 10rpx;">￥</text><text
					style="color: #EE2F37; font-weight: bold;font-size: 34rpx;">79</text>
			</view>
		</view>
		<!-- content end -->

		<!-- orderinfo start-->
		<view class="info">
			<view class="info_title">订单信息</view>
			<view class="info_list">
				<uni-list :border="false">
					<uni-list-item ellipsis="1"  title="订单编号" rightText="sfc1723683837788514"/>
					<uni-list-item ellipsis="1"  title="交易单号" rightText="4200002451202508156823091627"/>
					<uni-list-item ellipsis="1"  title="支付方式" rightText="微信支付"/>
					<uni-list-item ellipsis="1"  title="下单时间" rightText="2024-08-15 10:00:00"/>
					<uni-list-item ellipsis="1"  title="订单留言" rightText="不吃辣，少盐"/>
				</uni-list>
			</view>
		</view>
		<!-- orderinfo end -->
	</view>
</template>

<script>
	export default {
		data() {
			return {
				// orderlist
				list: [{
					icon: '/static/menu/menulist/gbyd.png',
					name: '干煸芸豆',
					desc: '芸豆+麻椒+老干妈+芝麻+辣椒',
					price: 16,
					num: 1
				}, {
					icon: '/static/menu/menulist/tclj.png',
					name: '糖醋里脊',
					desc: '猪肉+醋+糖',
					price: 28,
					num: 1
				}, {
					icon: '/static/menu/menulist/xhscjd.png',
					name: '西红柿炒鸡蛋',
					desc: '西红柿+高筋面粉+鸡蛋+淀粉',
					price: 14,
					num: 1
				}, {
					icon: '/static/menu/menulist/mf.png',
					name: '米饭',
					desc: '五常大米+水',
					price: 2.5,
					num: 2
				}, {
					icon: '/static/menu/menulist/gdt.png',
					name: '疙瘩汤',
					desc: '面粉+鸡蛋+海米',
					price: 16,
					num: 1
				}]
			}
		}
	}
</script>

<style lang="scss">
	.wrap {
		padding: 30rpx;

		.warp_header_title {
			font-weight: bold;
			font-size: 34rpx;
		}

		.warp_header_status {
			margin-top: 20rpx;
			margin-bottom: 30rpx;

			.wrap_header_vip {
				background-color: #27a871;
				color: white;
				padding: 5rpx 0;
				width: 100rpx;
				text-align: center;
				border-radius: 7rpx;
				font-size: 20rpx;
			}

			.wrap_header_status_info {
				color: #ccc;
				font-size: 24rpx;
			}
		}


		.table_number {
			text-align: center;
			border-radius: 14rpx;
			padding: 50rpx 0;
			font-weight: bold;
			box-shadow: 2px 0px 8px 0px rgba(39, 168, 113, 0.2);

			.txt {
				margin-bottom: 30rpx;
			}

			view:nth-child(2) {
				color: #EE2F37;
				font-size: 70rpx;
			}
		}

		.content {
			.content_header {
				font-size: 30rpx;
				font-weight: bold;
				margin-top: 30rpx;
				padding-bottom: 30rpx;
			}

			.list_box {
				box-shadow: 2px 0px 8px 0px rgba(39, 168, 113, 0.2);
				padding: 20rpx 30rpx;
				margin-bottom: 20rpx;
				border-radius: 14rpx;

				.item_menu_image {
					width: 100rpx;
					height: 100rpx;
					border-radius: 20rpx;
				}

				.item_menu_name {
					display: flex;
					flex-direction: column;
					margin-left: 20rpx;
					width: 100%;

					.item_menu_name_txt {
						font-size: 26rpx;
					}

					.item_menu_name_desc {
						margin-top: 10rpx;
						margin-bottom: 10rpx;
						line-height: 20rpx;
						font-size: 22rpx;
						color: #524d4d;
					}
				}
			}

			.content_footer {
				text-align: right;
			}
		}

		.info {
			margin-top: 30rpx;
			.info_title {
				font-size: 30rpx;
				font-weight: bold;
				margin-top: 30rpx;
				padding-bottom: 30rpx;
				border-bottom: 1px solid #ccc;
			}
			.info_list{
				
			}
		}




	}
</style>